<template>
  <div class="app-container bg-gray">
    <el-tabs type="border-card" class="box-1">
      <el-tab-pane label="转入的客户">
        <div class="header">
          <div>
            <el-button type="success" icon="el-icon-circle-check" class="bg-green">批量同意</el-button>
            <el-button type="danger" icon="el-icon-circle-close">批量拒绝</el-button>
          </div>
          <column-controller :check-items="th" style="float:right;" @change="columnCheck" />
        </div>
        <el-table :data="tableData" border style="width: 100%;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" header-align="center" align="center" fixed="left" />
          <el-table-column v-if="th[0].check" prop="name" label="客户昵称" min-width="100" header-align="center" align="center" />
          <el-table-column v-if="th[1].check" prop="status" label="跟进状态" min-width="140" header-align="center" align="center" sortable />
          <el-table-column v-if="th[2].check" prop="company" label="公司" min-width="180" header-align="center" align="center" />
          <el-table-column v-if="th[3].check" prop="assignor" label="指派人" min-width="100" header-align="center" align="center" />
          <el-table-column v-if="th[4].check" prop="uploader" label="上传者" min-width="100" header-align="center" align="center" />
          <el-table-column v-if="th[5].check" prop="source" label="来源" min-width="120" header-align="center" align="center" />
          <el-table-column v-if="th[6].check" prop="project" label="项目" min-width="120" header-align="center" align="center" />
          <el-table-column v-if="th[7].check" prop="signin_date" label="注册时间" min-width="130" header-align="center" align="center" sortable />
          <el-table-column v-if="th[8].check" prop="updata_date" label="更新时间" min-width="130" header-align="center" align="center" sortable />
          <el-table-column v-if="th[9].check" prop="contact_date" label="联系时间" min-width="130" header-align="center" align="center" sortable>
            <template slot-scope="scope">
              <el-tag type="primary">{{ scope.row.contact_date }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="160" header-align="center" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="success" size="mini" icon="el-icon-check" class="bg-green" circle />
              <el-button type="danger" size="mini" icon="el-icon-close" circle />
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="转出的客户">
        <div class="header">
          <div>
            <el-button type="success" icon="el-icon-circle-check" class="bg-green">批量取消</el-button>
          </div>
          <column-controller :check-items="th" style="float:right;" @change="columnCheck" />
        </div>
        <el-table :data="tableData" border style="width: 100%;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" header-align="center" align="center" fixed="left" />
          <el-table-column v-if="th[0].check" prop="name" label="客户昵称" min-width="100" header-align="center" align="center" />
          <el-table-column v-if="th[1].check" prop="status" label="跟进状态" min-width="140" header-align="center" align="center" sortable />
          <el-table-column v-if="th[2].check" prop="company" label="公司" min-width="180" header-align="center" align="center" />
          <el-table-column v-if="th[3].check" prop="assignor" label="指派人" min-width="100" header-align="center" align="center" />
          <el-table-column v-if="th[4].check" prop="uploader" label="上传者" min-width="100" header-align="center" align="center" />
          <el-table-column v-if="th[5].check" prop="source" label="来源" min-width="120" header-align="center" align="center" />
          <el-table-column v-if="th[6].check" prop="project" label="项目" min-width="120" header-align="center" align="center" />
          <el-table-column v-if="th[7].check" prop="signin_date" label="注册时间" min-width="130" header-align="center" align="center" sortable />
          <el-table-column v-if="th[8].check" prop="updata_date" label="更新时间" min-width="130" header-align="center" align="center" sortable />
          <el-table-column v-if="th[9].check" prop="contact_date" label="联系时间" min-width="130" header-align="center" align="center" sortable>
            <template slot-scope="scope">
              <el-tag type="primary" >{{ scope.row.contact_date }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column v-if="th[9].check" prop="result" label="联系时间" min-width="130" header-align="center" align="center" sortable>
            <template slot-scope="scope">
              <el-tag :type="scope.row.result===0?'danger':'info'" >{{ scope.row.result===0?'待确认':'已接受' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="160" header-align="center" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="success" size="mini" class="bg-green" round>取消</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ColumnController } from '../components'

export default {
  components: { ColumnController },
  data() {
    return {
      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      total: 30,
      tableData: [{
        name: '许堉颖',
        status: '承担签约',
        company: '小程序',
        assignor: '朱峰',
        uploader: 'root',
        source: '官网推广',
        project: '腾讯云体验',
        signin_date: '2018-09-19',
        updata_date: '2018-09-19',
        contact_date: '15天',
        result: 0
      }, {
        name: '许堉颖',
        status: '承担签约',
        company: '小程序',
        assignor: '朱峰',
        uploader: 'root',
        source: '官网推广',
        project: '腾讯云体验',
        signin_date: '2018-09-19',
        updata_date: '2018-09-19',
        contact_date: '逾期15天',
        result: 0
      }, {
        name: '许堉颖',
        status: '初步接触',
        company: '小程序',
        assignor: '朱峰',
        uploader: 'root',
        source: '官网推广',
        project: '腾讯云体验',
        signin_date: '2018-09-19',
        updata_date: '2018-09-19',
        contact_date: '15天',
        result: 1
      }, {
        name: '许堉颖',
        status: '承担签约',
        company: '小程序',
        assignor: '朱峰',
        uploader: 'root',
        source: '官网推广',
        project: '腾讯云体验',
        signin_date: '2018-09-19',
        updata_date: '2018-09-19',
        contact_date: '15天',
        result: 1
      }, {
        name: '许堉颖',
        status: '承担签约',
        company: '小程序',
        assignor: '朱峰',
        uploader: 'root',
        source: '官网推广',
        project: '腾讯云体验',
        signin_date: '2018-09-19',
        updata_date: '2018-09-19',
        contact_date: '15天',
        result: 0
      }, {
        name: '许堉颖',
        status: '承担签约',
        company: '小程序',
        assignor: '朱峰',
        uploader: 'root',
        source: '官网推广',
        project: '腾讯云体验',
        signin_date: '2018-09-19',
        updata_date: '2018-09-19',
        contact_date: '15天',
        result: 0
      }, {
        name: '许堉颖',
        status: '承担签约',
        company: '小程序',
        assignor: '朱峰',
        uploader: 'root',
        source: '官网推广',
        project: '腾讯云体验',
        signin_date: '2018-09-19',
        updata_date: '2018-09-19',
        contact_date: '15天',
        result: 0
      }],
      th: [{
        name: '客户昵称',
        check: true
      }, {
        name: '跟进状态',
        check: true
      }, {
        name: '公司',
        check: true
      }, {
        name: '指派人',
        check: true
      }, {
        name: '上传者',
        check: true
      }, {
        name: '来源',
        check: true
      }, {
        name: '项目',
        check: true
      }, {
        name: '注册时间',
        check: true
      }, {
        name: '更新时间',
        check: true
      }, {
        name: '联系时间',
        check: true
      }]
    }
  },
  methods: {
    columnCheck(index) {
      this.th[index].check = !this.th[index].check
      // console.log(index)
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../styles/index.scss';
.box-1 {
  height: calc(100vh - 120px);
  overflow: auto;
  .header {
    @include flex-row(center, space-between);
  }
}
</style>

